<template>
  <h1>登录</h1>
  <!--  :xxx = v-bind:xxx vue 属性绑定 -->
  <el-form
    ref="ruleFormRef"
    :rules="rules"
    :label-position="labelPosition"
    label-width="100px"
    :model="formLabelAlign"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formLabelAlign.username" clearable />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="formLabelAlign.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>

    <el-form-item>
      <!-- @click = v-on:click -->
      <el-button type="primary" @click="submitForm('ruleFormRef')"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "长度应该在 3 ~ 10 之间",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 20,
            message: "密码长度在 6 ~ 20 之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(form) {
      const formEl = this.$refs[form];
      formEl.validate((valid, fields) => {
        if (valid) {
          console.log("submit!");
          // 跳转页面
          this.$router.push("/index");
          // this.$axios.get("https://www.baidu.com").then((res) => {
          //   console.log(res);
          // });
        } else {
          console.log("error submit!", fields);
        }
      });
    },
  },
};
</script>
